<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <template #left>
      <l-panel style="padding-right: 0">
        <template #title>
          {{ $t("签章分类") }}
          <div class="tree-setting-btn">
            <el-tooltip effect="dark" content="分类管理" placement="top">
              <el-button @click="handleSettingClick" type="text" icon="el-icon-setting"></el-button>
            </el-tooltip>
          </div>
        </template>
        <el-tree ref="tree" node-key="id" :highlight-current="true" :data="treeData" @node-click="handleNodeClick">
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="el-icon-notebook-2"></i>
            {{ node.label }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-panel style="padding-left: 0">
      <template #toolLeft>
        <div class="l-panel--item">
          <el-input placeholder="请输入模版名称" v-model="searchWord" @keyup.enter.native="hanleSearch" size="mini">
            <el-button @click.native="hanleSearch" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns @click="handleAdd()">
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table
        :loading="tableLoading"
        :columns="columns"
        :dataSource="tableData"
        row-key="f_Id"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <template v-slot:f_ImgFile="scope">
          <el-image
            style="width: 100px; margin-top: 8px"
            :src="`${apiUrl}system/annexesfile/${scope.row.f_ImgFile}?token=${token}`"
            fit="contain"
            :preview-src-list="[`${apiUrl}system/annexesfile/${scope.row.f_ImgFile}?token=${token}`]"
            lazy
          >
            <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
          </el-image>
        </template>
        <template v-slot:f_EnabledMark="scope">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.f_EnabledMark"
            @change="handleEnableChange(scope.row)"
          >
          </el-switch>
        </template>

        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>
    <l-drawer :title="$t('分类管理')" :visible.sync="classifysVisible" :showOk="false" :showClose="false" size="800px">
      <l-dataitem-index classifyCode="StampType"></l-dataitem-index>
    </l-drawer>

    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="472"
      :width="600"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
const api = window.$api.workflow.stamp;
import MyForm from "./form";
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      // 左侧树形
      classifysVisible: false,
      treeCategory: "",

      // 搜索
      searchWord: "",

      // 表格
      columns: [
        { label: "名称", prop: "f_StampName", width: "150" },
        {
          label: "分类",
          prop: "f_StampType",
          width: "120",
          align: "center",
          dataType: "dataItem",
          dataCode: "StampType",
        },
        { label: "状态", prop: "f_EnabledMark", width: "64", align: "center" },
        { label: "签章", prop: "f_ImgFile", width: "124", align: "center" },
        { label: "属于人", prop: "f_UserIds", minWidth: "100", dataType: "user" },
      ],
      tableBtns: [
        { prop: "Edit", label: "编辑" },
        { prop: "Delete", label: "删除" },
      ],
      tableLoading: false,
      tableTotal: 0,
      tablePageSize: 50,
      tableCurrentPage: 1,
      tableData: [],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
    };
  },
  computed: {
    treeData() {
      return this.lr_dataItemTree(this.lr_dataItem["StampType"]);
    },
  },
  mounted() {
    this.lr_loadDataItem("StampType");
    this.loadTablePage();
  },
  methods: {
    loadTablePage(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        sidx: "F_CreateDate DESC",
        f_StampName: this.searchWord,
        f_StampType: this.treeCategory,
      };
      api
        .getPage(queryData)
        .then((res) => {
          const data = this.$deepClone(res.data.data);
          this.tableData = data.rows;
          this.tableTotal = data.records;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.tableLoading = false;
        });
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTablePage(true);
    },

    // 搜索
    hanleSearch() {
      this.loadTablePage();
    },

    // 分类
    handleNodeClick(node) {
      this.treeCategory = node.id;
      this.tableCurrentPage = 1;
      this.loadTablePage();
    },
    handleSettingClick() {
      this.classifysVisible = true;
    },

    // 表单
    handleAdd() {
      this.formEdit = false;
      this.handleShowForm("新增签章");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.handleShowForm("编辑签章");
    },
    handleDelete($index, row) {
      this.$confirm(this.$t("此操作将永久删除该数据, 是否继续?"), this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning",
      })
        .then(async () => {
          await api.remove(row.f_StampId);
          this.tableData.splice($index, 1);
          this.tableTotal--;
          this.$message({
            type: "success",
            message: this.$t("删除成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除!"),
          });
        });
    },
    handleEnableChange(row) {
      api.updateState(row.f_StampId, row.f_EnabledMark).then(() => {
        this.$message({
          type: "success",
          message: "更新成功!",
        });
      });
    },
    async handleSave(showLoading, hideLoading) {
      if (await this.$refs.form.validateForm()) {
        showLoading();
        const postData = this.$refs.form.getForm();
        let res = "";
        if (this.formEdit) {
          // 编辑
          res = await this.$awaitWraper(api.update(this.formEditRow.f_StampId, postData));
        } else {
          // 新增
          res = await this.$awaitWraper(api.add(postData));
        }
        if (res) {
          this.$message({
            type: "success",
            message: this.$t("保存成功!"),
          });
          this.loadTablePage();
          this.formVisible = false;
        }

        hideLoading();
      }
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    handleOpenedForm() {
      if (this.formEdit) {
        this.$refs.form.setForm(this.formEditRow);
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
  },
};
</script>
